<template>
    <page-view> 
        <page-header title="分类" :showBack="false"></page-header>
        <div class="wrapper">
            <div class="menu-wrapper">
                <ul class="content">
                    <li v-for="(item,index) in menu" :key="index">
                        {{item.category_name}}
                    </li>
                   
                
                </ul>
            </div>
            <div class="item-wrapper">
                <ul>
                     <li v-for="(item,index) in menu" :key="index">
                        <p class="catagory-name"> {{item.category_name}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </page-view>
</template>

<script>
import PageView from '../components/PageView.vue'
import BScroll from '@better-scroll/core'
import api from '../utils/api'
import { reactive, toRefs } from '@vue/reactivity'
export default {
  components: { PageView },
    name:'Category',
    setup () {

        let info=reactive({
            pageCount: 0,
            pageEnd: 0,
            pageIndex: 1,
            pageStart: 0,
            totalCount: 0,
            menu:[],
           
        })

        const getListByPage=async(pageIndex)=>{
            let result= await api.categoryInfo.getListByPage({pageIndex})
            console.log(result)
            info.pageCount=result.pageCount
            info.pageIndex=+result.pageIndex
            info.pageStart=result.pageStart
            info.pageEnd=result.pageEnd
            info.totalCount=result.totalCount
            info.menu=result.listData
        }
        getListByPage(1)
        return {...toRefs(info),BScroll}
    }
}
</script>

<style lang="scss" scoped>

</style>